import './UserChatItem.scss'
import { useEffect, useState, useRef } from 'react'
import { localGetAIMessageAPI } from '@/apis/student.js'
import { AIChatAPI } from '@/apis/teacher';
import { useSelector } from 'react-redux';

export default function UserChatItem({ info }) {
    const { user_status } = useSelector(state => state.user);
    const mesRef = useRef(null);

    const [AIMsg, setAIMsg] = useState('');
    const markdown = window.markdown;


    useEffect(() => {
        async function getAIMsg() {
            console.log(info);
            console.log(markdown);
            const res = await AIChatAPI(info,user_status.token);
            // const reader = res.body.getReader();
            // const decoder = new TextDecoder();
            // let num = 1;
            // while(1){
            //     num++;
            //     const { done, value } = await reader.read();
            //     console.log(value);
            //     if(num > 15) {
            //         console.log(reader);
            //         console.log('done',done);
            //         break;
            //     }
            //     const txt = decoder.decode(value);
            //     console.log(txt);
            // }
            // console.log(res.body);
            // const res = await localGetAIMessageAPI();
            console.log(res);
            mesRef.current.innerHTML = markdown.toHTML(res.data.response);
            setAIMsg(res.data.response);
        }

        getAIMsg();
    }, []);


    return (
        <div  className="UserChatItem">
            <div className='user'>
                <div>{info}</div>
            </div>
            <div className='AI'>
                <img src='/static/images/ai-header.svg' alt='11' />
                <div ref={mesRef}></div>
            </div>
        </div>
    )
}